import React, {Component, useEffect, useState} from "react";
import {Text, View, Image,} from "@tarojs/components";
import {AtTabs, AtTabsPane, AtBadge, AtButton} from 'taro-ui'
import './myOrder.less'
import img from '../../../img/tabbarIcon/2.png'
import store from "../../../store";
import Taro from '@tarojs/taro'
import http from "../../../service/api";
import {toJS} from "mobx";

const MyOrder = () => {
    useEffect(() => {
        click(1)
    }, [])
    const click = (choose) => {
        Taro.request({
            url: http.api4 + "/PortalOrder/myOrders",
            method: "get",
            /*  header: {
                  'content-type': 'application/x-www-form-urlencoded' // 默认值
              },*/
            data: {
                uid: 1,
                // uid:store.userInformation.id,
                choose
            },
            success(res) {
                // console.log(res)
                let goodsData=res.data.data
                goodsData.forEach((item)=>{
                    if (item.systemStatus==0){
                        item.type="待付款"
                    }else  if (item.systemStatus==1){
                        item.type="待发货"
                    }else  if (item.systemStatus==2){
                        item.type="已发货"
                    }else  if (item.systemStatus==3){
                        item.type="已完成"
                    }
                })
                setData(goodsData)
                if (goodsData.length == 0) {
                    setIsNull(true)
                } else {
                    setIsNull(false)
                }
            },
            fail(err) {
                console.log("失败了")
            }
        })
    }
    const [isnull, setIsNull] = useState(false)
    const [current, setCurrent] = useState(0)
    const [data, setData] = useState([])
    // const [data1]=useState(store.selectNoneData)
    // const [data1] = useState(toJS(store.selectNoneData))
    const [data1] = useState(toJS(store.selectNoneData))
    const handleClick = (value) => {
        setData([])
        setIsNull(false)
        // console.log(value + 1)
        // click(store.userInformation.id,value+1)
        click(value + 1)
        setCurrent(value)
        // console.log(data.length)
    }
    const goodData = (item) => {
        store.setDataId(item.id)
        store.setSid(item.bid)
         Taro.navigateTo({
             url: "../../details/details"
         })
    }
    const lookOrder = (item) => {
        // console.log(item)
        store.setOrderInformation(item)
        Taro.navigateTo({
            url: "../orderInformation/orderInformation"
        })
    }
    
    return (
        <View className="myOrder">
            <AtTabs
                animated={true}
                current={current}
                onClick={handleClick}
                tabList={[
                    {title: '全部'},
                    {title: '待付款'},
                    {title: '待发货'},
                    {title: '已发货'},
                    {title: '已完成'}
                ]}>
                <AtTabsPane current={current} index={0}>
                    {isnull ?
                        <View>
                            <View className="none">
                                暂时没有结果哦！
                            </View>
                            <View className="selectLook">看看以下商品吧~</View>
                            <View className="hot">
                                <View className="hotGoods">
                                    {data1.map((item) => {
                                        return (
                                            <View className="hotGood" onClick={() => {
                                                goodData(item)
                                            }}>
                                                <Image src={item.img} className="img" lazyLoad={true}/>
                                                <View>{item.name}</View>
                                                <View>￥{item.price}</View>
                                            </View>
                                        )
                                    })}
                                </View>
                            </View>
                        </View>
                        :
                        <View>
                            {data.map((item) => {
                                return (
                                    <View className="list" onClick={() => {
                                        lookOrder(item)
                                    }
                                    }>
                                        <View><Image src={item.img} className="img"/></View>
                                        <View className="information">
                                            <View className="title">{item.name}</View>
                                            <View className="spe"><Text
                                                style={{marginRight: "10px"}}>{item.specification}</Text><Text>{item.num}件</Text></View>
                                            <View className="price">实付{item.pay}元</View>
                                        </View>
                                        <View className="time">
                                            <View className="timeData">{item.orderTime}</View>
                                            <View className="status">
                                                <View className='at-icon at-icon-shopping-bag'/>
                                                {item.type}
                                            </View>
                                        </View>
                                    </View>
                                )
                            })}
                        
                        </View>
                    }
                </AtTabsPane>
                <AtTabsPane current={current} index={1}>
                    {isnull ?
                        <View>
                            <View className="none">
                                暂时没有结果哦！
                            </View>
                            <View className="selectLook">看看以下商品吧~</View>
                            <View className="hot">
                                <View className="hotGoods">
                                    {data1.map((item) => {
                                        return (
                                            <View className="hotGood" onClick={() => {
                                                goodData(item)
                                            }}>
                                                <Image src={item.img} className="img" lazyLoad={true}/>
                                                <View>{item.name}</View>
                                                <View>￥{item.price}</View>
                                            </View>
                                        )
                                    })}
                                </View>
                            </View>
                        </View>
                        :
                        <View>
                            {data.map((item) => {
                                return (
                                    <View className="list" onClick={() => {
                                        lookOrder(item)
                                    }
                                    }>
                                        <View><Image src={item.img} className="img"/></View>
                                        <View className="information">
                                            <View className="title">{item.name}</View>
                                            <View className="spe"><Text
                                                style={{marginRight: "10px"}}>{item.specification}</Text><Text>{item.num}件</Text></View>
                                            <View className="price">实付{item.pay}元</View>
                                        </View>
                                        <View className="time">
                                            <View className="timeData">{item.orderTime}</View>
                                            <View className="status">
                                                <View className='at-icon at-icon-shopping-bag'/>
                                                {item.type}
                                            </View>
                                        </View>
                                    </View>
                                )
                            })}
                        
                        </View>
                    }
                </AtTabsPane>
                <AtTabsPane current={current} index={2}>
                    {isnull ?
                        <View>
                            <View className="none">
                                暂时没有结果哦！
                            </View>
                            <View className="selectLook">看看以下商品吧~</View>
                            <View className="hot">
                                <View className="hotGoods">
                                    {data1.map((item) => {
                                        return (
                                            <View className="hotGood" onClick={() => {
                                                goodData(item)
                                            }}>
                                                <Image src={item.img} className="img" lazyLoad={true}/>
                                                <View>{item.name}</View>
                                                <View>￥{item.price}</View>
                                            </View>
                                        )
                                    })}
                                </View>
                            </View>
                        </View>
                        :
                        <View>
                            {data.map((item) => {
                                return (
                                    <View className="list" onClick={() => {
                                        lookOrder(item)
                                    }
                                    }>
                                        <View><Image src={item.img} className="img"/></View>
                                        <View className="information">
                                            <View className="title">{item.name}</View>
                                            <View className="spe"><Text
                                                style={{marginRight: "10px"}}>{item.specification}</Text><Text>{item.num}件</Text></View>
                                            <View className="price">实付{item.pay}元</View>
                                        </View>
                                        <View className="time">
                                            <View className="timeData">{item.orderTime}</View>
                                            <View className="status">
                                                <View className='at-icon at-icon-shopping-bag'/>
                                                {item.type}
                                            </View>
                                        </View>
                                    </View>
                                )
                            })}
                        
                        </View>
                    }
                </AtTabsPane>
                <AtTabsPane current={current} index={3}>
                    {isnull ?
                        <View>
                            <View className="none">
                                暂时没有结果哦！
                            </View>
                            <View className="selectLook">看看以下商品吧~</View>
                            <View className="hot">
                                <View className="hotGoods">
                                    {data1.map((item) => {
                                        return (
                                            <View className="hotGood" onClick={() => {
                                                goodData(item)
                                            }}>
                                                <Image src={item.img} className="img" lazyLoad={true}/>
                                                <View>{item.name}</View>
                                                <View>￥{item.price}</View>
                                            </View>
                                        )
                                    })}
                                </View>
                            </View>
                        </View>
                        :
                        <View>
                            {data.map((item) => {
                                return (
                                    <View className="list" onClick={() => {
                                        lookOrder(item)
                                    }
                                    }>
                                        <View><Image src={item.img} className="img"/></View>
                                        <View className="information">
                                            <View className="title">{item.name}</View>
                                            <View className="spe"><Text
                                                style={{marginRight: "10px"}}>{item.specification}</Text><Text>{item.num}件</Text></View>
                                            <View className="price">实付{item.pay}元</View>
                                        </View>
                                        <View className="time">
                                            <View className="timeData">{item.orderTime}</View>
                                            <View className="status">
                                                <View className='at-icon at-icon-shopping-bag'/>
                                                {item.type}
                                            </View>
                                        </View>
                                    </View>
                                )
                            })}
                        
                        </View>
                    }
                </AtTabsPane>
                <AtTabsPane current={current} index={4}>
                    {isnull ?
                        <View>
                            <View className="none">
                                暂时没有结果哦！
                            </View>
                            <View className="selectLook">看看以下商品吧~</View>
                            <View className="hot">
                                <View className="hotGoods">
                                    {data1.map((item) => {
                                        return (
                                            <View className="hotGood" onClick={() => {
                                                goodData(item)
                                            }}>
                                                <Image src={item.img} className="img" lazyLoad={true}/>
                                                <View>{item.name}</View>
                                                <View>￥{item.price}</View>
                                            </View>
                                        )
                                    })}
                                </View>
                            </View>
                        </View>
                        :
                        <View>
                            {data.map((item) => {
                                return (
                                    <View className="list" onClick={() => {
                                        lookOrder(item)
                                    }
                                    }>
                                        <View><Image src={item.img} className="img"/></View>
                                        <View className="information">
                                            <View className="title">{item.name}</View>
                                            <View className="spe"><Text
                                                style={{marginRight: "10px"}}>{item.specification}</Text><Text>{item.num}件</Text></View>
                                            <View className="price">实付{item.pay}元</View>
                                        </View>
                                        <View className="time">
                                            <View className="timeData">{item.orderTime}</View>
                                            <View className="status">
                                                <View className='at-icon at-icon-shopping-bag'/>
                                                {item.type}
                                            </View>
                                        </View>
                                    </View>
                                )
                            })}
                        
                        </View>
                    }
                </AtTabsPane>
            </AtTabs>
        </View>
    )
}
export default MyOrder